<template>
  <el-button type="primary" @click="dialogVisible1 = true">新增</el-button>
  <el-table :data="store.state.dictionaryTable.tableData" style="width: 100%">
    <el-table-column label="序号" width="140">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="名字" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.drugName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="用法" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.drugUsage }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="备注" width="220">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.drugRemark }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="分类" width="140">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.drugSort
          }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="来源" width="140">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.drugSource }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteDrug(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>


  <!-- 新编辑弹窗 -->
  <el-dialog v-model="dialogVisible" title="编辑">
    <el-form>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="user.drugName" disabled></el-input>
      </el-form-item>
      <el-form-item label="用法" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="user.drugUsage"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="user.drugRemark"></el-input>
      </el-form-item>
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="user.drugSort"></el-input>
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="user.drugSource" disabled></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" round @click="editSave">保存</el-button>
      </span>
    </template>
  </el-dialog>



  <!-- 新新增弹窗 -->
  <el-dialog v-model="dialogVisible1" title="新增">
    <el-form>
      <el-form-item label="药品Id" :label-width="formLabelWidth">
        <el-input style="width:200px"  v-model="adduser.drugId" 
        ></el-input>
      </el-form-item>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugName"></el-input>
      </el-form-item>
      <el-form-item label="用法" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugUsage"></el-input>
      </el-form-item>
      <el-form-item label="重量" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugSpecification"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugRemark"></el-input>
      </el-form-item>
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugSort"></el-input>
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input style="width:200px" v-model="adduser.drugSource"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" round @click="addsave">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <div class="page">
    <div>
      <el-pagination background v-model:page-size="pageSize" @current-change="pageChange" layout="prev, pager, next"
    :total="store.state.dictionaryTable.tableTotal" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onBeforeMount } from "vue";
import axios from "@/utils/http";
import { useStore, mapMutations } from "vuex";
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useStore();
const user = ref({ id: '', drugName: '', drugUsage: "", drugRemark: '', drugSort: '', drugSource: '' })
const adduser = ref({
  drugName: '', drugUsage: "", drugRemark: '', drugSort: '', drugSource: '', drugId: '', drugSpecification: ''
})
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const formLabelWidth = "140px";
const tableData = ref('')
const pageSize = ref(4)
const currentpage1 = ref(1)
// 渲染表格接口
const data: any = ref("")
const setDicData = mapMutations(["setDicData"]).setDicData.bind({
  $store: store,
});
onBeforeMount(
  () => {

    setDicData({ currentPage: 1, pageSize: pageSize.value })

  })

// 编辑拿数据
const edit = (row: any) => {
  dialogVisible.value = true
  user.value.id = row.id
  user.value.drugName = row.drugName
  user.value.drugRemark = row.drugRemark
  user.value.drugUsage = row.drugUsage
  user.value.drugSort = row.drugSort
  user.value.drugSource = row.drugSource
}


// 编辑保存
const editDicData = mapMutations(["editDicData"]).editDicData.bind({
  $store: store,
});
const editSave = () => {
  if (!user.value.drugName || !user.value.drugUsage
    || !user.value.drugRemark || !user.value.drugSort
    || !user.value.drugSource) {
    ElMessage({
      showClose: true,
      message: '当前页面有编辑数据为空！！！',
      type: 'warning',
    })
  }
  else {
    ElMessageBox.confirm(
      '确认编辑数据无误吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '编辑保存成功',
        })
        dialogVisible.value = false
        editDicData({
          drugId: user.value.id,
          drugName: user.value.drugName,
          drugRemark: user.value.drugRemark,
          drugUsage: user.value.drugUsage,
          drugSort: user.value.drugSort,
          drugSource: user.value.drugSource
        })
        setDicData({ currentPage: currentpage1.value, pageSize: pageSize.value })

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

  }



}
const pageChange = (currentPage: any) => {
  currentpage1.value = currentPage
  setDicData({ currentPage: currentPage, pageSize: pageSize.value })

}
// 删除接口
const delDicData = mapMutations(["delDicData"]).delDicData.bind({
  $store: store,
});
const deleteDrug = (row: any) => {
  ElMessageBox.confirm(
    '确认删除吗？',
    '温馨提示',
    {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      console.log(row.id);
      delDicData(row.id)
      setDicData({ currentPage: currentpage1.value, pageSize: pageSize.value })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

// 增加接口
const addDicData = mapMutations(["addDicData"]).addDicData.bind({
  $store: store,
});
const addsave = () => {
  if (!adduser.value.drugId || !adduser.value.drugName || !adduser.value.drugUsage
    || !adduser.value.drugSpecification || !adduser.value.drugRemark || !adduser.value.drugSort
    || !adduser.value.drugSource) {
    ElMessage({
      showClose: true,
      message: '当前页面增加数据不能为空！！！',
      type: 'warning',
    })

  }
  else {
    ElMessageBox.confirm(
      '确认数据添加无误吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',

      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '添加成功',
        })
        dialogVisible1.value = false
        addDicData(
          {
            drugId: adduser.value.drugId,
            drugName: adduser.value.drugName,
            drugUsage: adduser.value.drugUsage,
            drugRemark: adduser.value.drugRemark,
            durgSort: adduser.value.drugSort,
            durgSource: adduser.value.drugSource,
            drugSpecification: adduser.value.drugSpecification,
          }

        )
        adduser.value.drugId="",
        adduser.value.drugName="",
        adduser.value.drugUsage="",
        adduser.value.drugRemark='',
        adduser.value.drugSort='',
        adduser.value.drugSource='',
        adduser.value.drugSpecification='',
        setDicData({ currentPage: currentpage1.value, pageSize: pageSize.value })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

  }

}
</script>
  
<style scoped>
.page{
  margin-top: 30px;
  margin-right: 80px;
  display: flex;
  justify-content: center;
}
</style>